<script setup>
import { ref } from 'vue';
import easyapi from '../api'
import { ElMessage } from 'element-plus';

const changeObject=ref({});
const changeVisible=ref(false);
const exitout = function () {
  sessionStorage.removeItem("easytoken")
  location.reload();//刷新页面
}
// // 定义用于打开修改密码的页面的变量
// const changeWinVisible = ref(false);
// const changeSave=async function(){
//   let result = await easyapi.putJson("/api/changepass",changeObject.value);
// }
const changepassword=async function(){
  changeObject.value={}
  const AAgetusername=sessionStorage.getItem("Agetusername");
  changeObject.value.username=AAgetusername;
  changeVisible.value=true;
}
const addsave=async function(){
  //发送请求
  let result=await easyapi.postForm("/api/changepassword",changeObject.value);
  console.log(result);
  if(result.data==1){
    ElMessage({
        type: 'success',
        message: '修改成功'
      })
  }else{
    ElMessage({
        type: 'info',
        message: '修改失败,请确认后重新输入'
      })
  }
  changeVisible.value=false;
  }

  const username = ref('你好，'+sessionStorage.getItem("Agetusername")+' 管理员');

// 头像的图片链接，这里也需要根据实际情况进行设置
const avatarUrl = ref('https://bpic.588ku.com/element_origin_min_pic/19/08/21/db123b756ff0c3b404aaec62ea6e41a9.jpg');

const checkname=function(rule,value,callback){
  let reg= /^\d{6,16}$/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(loginObj.value.newpass)){
        callback();
    }else{
        callback(new Error('输入的格式不正确'))
    }
}
const easyrules= {
  newpass: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      validator: checkname,
      trigger: 'blur'
    }
  ]
  
};

</script>

<template>


  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px; position: relative;">
        <div class="user-info" style="position: absolute; top: 20px; left: 20px;">
          <!-- 用户头像 -->
          <img class="user-avatar" :src="avatarUrl" alt="">
          <!-- 用户名 -->
          <span class="user-name">{{ username }}</span>
        </div>

        <el-row type="flex" justify="end" align="middle" style="width: 100%; height: 100%">
         
            <button type="primary"   @click="exitout()" class="button-style">退出登录</button>
          
         
        <button @click="changepassword()"  class=" logout-button" >修改密码</button>
    
    </el-row>
        <!-- <el-row>
          
          <el-col :span="6">
            <el-statistic title="车辆总个数" :value="150" class="large-title" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="车辆出租个数" :value="100" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="车辆剩余个数" :value="42" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="车辆维修个数" :value="8">
              <template #suffix>
                <el-icon style="vertical-align: -0.125em">
                  <ChatLineRound />
                </el-icon>
              </template>
            </el-statistic>
          </el-col>
        </el-row> -->
        

        <!-- 弹出的账号密码和新密码修改框 -->
        <!-- <el-dialog v-model="changeWinVisible" title="信息编辑" width="500">
          <el-form :model="changeObject">
            <el-form-item label="账号" :label-width="110">
              <el-input v-model="changeObject.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="110">
              <el-input v-model="changeObject.userpass" autocomplete="off" />
            </el-form-item>
            <el-form-item label="修改的密码" :label-width="110">
              <el-input v-model="changeObject.newpass" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="changeWinVisible = false">取消</el-button>
              <el-button type="primary" @click="changeSave">
                保存
              </el-button>
            </div>
          </template>
        </el-dialog> -->
        <!-- 弹出的账号密码和新密码修改框 -->

      </el-header>
      <el-container>
        <el-aside style="width: 200px;"><el-menu active-text-color="#ffd04b" background-color="##"
            class="el-menu-vertical-demo" default-active="2" text-color="#FF4500" @open="handleOpen" @close="handleClose"
            router="true">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">车辆信息管理</span>
              </template>
              <el-menu-item index="1-1" route="carlist" style="color:#FF4500">车辆信息表</el-menu-item>
              <el-menu-item index="1-2" route="carsortlist" style="color:#FF4500">车辆分类表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">用户信息管理</span>
              </template>
              <el-menu-item index="2-1" route="userlist" style="color:#FF4500">用户信息表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">租赁订单管理</span>
              </template>
              <el-menu-item index="3-1" route="rentalslist" style="color:#FF4500">租赁订单信息表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">检查订单管理</span>
              </template>
              <el-menu-item index="4-1" route="checktablelist" style="color:#FF4500">检查信息表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">员工信息管理</span>
              </template>
              <el-menu-item index="5-1" route="stafflist" style="color:#FF4500">员工信息表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span style="color:#1E88E5">车辆数量柱形图</span>
              </template>
              <el-menu-item index="6-1" route="pieshapedview" style="color:#FF4500">车辆数量柱形图</el-menu-item>
            </el-sub-menu>

            





          </el-menu></el-aside>
        <el-main>
          <router-view></router-view></el-main>
      </el-container>
      

        <!-- 修改密码弹出的代码框 -->
<el-dialog v-model="changeVisible" title="修改密码" width="400" >
  <el-form :model="changeObject" :rules="easyrules">
    <!-- <el-form-item label="id" :label-width="80">
      <el-input v-model="addObject.id" autocomplete="off" />
    </el-form-item> -->
    
    <el-form-item label="账号" :label-width="80">
      <el-input v-model="changeObject.username" placeholder="请输入你的账户名" autocomplete="off" :disabled="true"/>
    </el-form-item>
    <el-form-item label="旧密码" :label-width="80">
      <el-input v-model="changeObject.userpass" placeholder="请输入旧的密码" autocomplete="off" />
    </el-form-item>
    <el-form-item label="新密码" :label-width="80" >
      <el-input v-model="changeObject.newpass" placeholder="请输入新的密码" autocomplete="off" />
    </el-form-item>
    <el-form-item label="确认密码" :label-width="80" >
      <el-input v-model="changeObject.confirmpassword" placeholder="请在一次输入新的密码" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="addVisible = false">取消</el-button>
      <el-button type="primary" @click="addsave">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>



    </el-container>
  </div>
</template>

<style>
/* 在您的样式文件中添加 */
.large-title {
  font-size: 100px;
}

.common-layout {
  background-image: url('../assets/aaa.jpg');
  /* 替换为你的图片路径 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
  /* 图片不重复 */
  background-position: center center;
  /* 图片居中显示 */
  /* 其他样式可以根据需要添加 */
  min-height: 100vh;
  /* 至少为视口的高度 */
}

.custom-tag {
  padding: 50px 60px;
  font-size: 50px;
}

.center-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100vh;
  /* 视口高度 */
}

.move-to-top-right {
  position: fixed; /* 固定定位，相对于浏览器窗口定位 */

  z-index: 1000;   /* 确保按钮在页面其他元素的上方 */
}

.el-header {
  height: 100px;
  position: relative; /* 允许绝对定位的子元素 */
}
.button-style {
  margin-right: 10px; 
  padding: 10px 20px; /* 增大内边距 */
  font-size: 18px; /* 文本大小 */
  font-weight: bold; /* 文本加粗 */
  color: #ffffff; /* 文本颜色 */
  background-color: #409eff; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角边框 */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s; /* 平滑过渡效果 */
  outline: none; /* 点击时不显示轮廓 */
}

/* 按钮的悬停效果 */
.button-style:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}


.logout-button {
  position: absolute;
  top: 28px;
  right: 150px; 
  padding: 10px 20px; /* 增大内边距 */
  font-size: 18px; /* 文本大小 */
  font-weight: bold; /* 文本加粗 */
  color: #ffffff; /* 文本颜色 */
  background-color: #409eff; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角边框 */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s; /* 平滑过渡效果 */
  outline: none; /* 点击时不显示轮廓 */
  /*退出登录  根据需要调整距离，可能需要比10px大一些以避开边框或阴影 */
}

/* 按钮的悬停效果 */
.logout-button:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}

.user-info {
  /* 定位到左上角 */
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;    /* 根据需要调整 */
  height: 60px;   /* 根据需要调整 */
  border-radius: 50%;  /* 圆形头像 */
  margin-right: 10px; /* 与用户名之间的间隔 */
}

.user-name {
  font-size: 18px;  /* 根据需要调整 */
  color: #fff;      /* 文字颜色，根据背景调整 */
}

</style>